<template>
	<view class="home-container">
		<!-- 搜索区域 -->
		<searchBar></searchBar>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swipers" :key="index">
				<view class="swiper-item"><image class="swiper-image" :src="item.image_src" mode="widthFix"></image></view>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav-box"><image v-for="item in navs" :key="item.name" :src="item.image_src" mode=""></image></view>
		<!-- 楼层数据 -->
		<view class="floor-box" v-for="(item, index) in floors" :key="index">
			<!-- 头部 -->
			<view class="header"><image :src="item.floor_title.image_src" mode=""></image></view>
			<!-- 底部 -->
			<view class="bottom">
				<!-- 左侧图片 -->
				<image :src="item.product_list[0].image_src" mode=""></image>
				<!-- 右侧 -->
				<view class="right">
					<template v-for="(it, i) in item.product_list">
						<image v-if="i !== 0" :src="it.image_src" :key="i"></image>
					</template>
				</view>
			</view>
			<!-- 返回顶部 -->
			<view class="to-top" v-if="isShow" @click="toTop">
				<text>^</text>
				顶部
			</view>
		</view>
	</view>
</template>

<script>
	// 导入组件
import searchBar from '../../components/searchBar.vue';
export default {
	// 注册组件
	components: {
		searchBar
	},
	data() {
		return {
			// 轮播图数据
			swipers: [],
			// 导航数据
			navs: [],
			// 楼层数据
			floors: [],
			// 是否显示
			isShow: false
		};
	},
	onLoad() {
		// 轮播图数据
		this.getSwipers();
		// 导航数据
		this.getNav();
		// 楼层数据
		this.getFloor();
	},
	// 滚动事件
	onPageScroll(e) {
		// console.log('e:',e)
		if (e.scrollTop >= 200) {
			// 显示
			this.isShow = true;
		} else {
			// 隐藏
			this.isShow = false;
		}
	},
	methods: {
		// 返回顶部
		toTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		// 楼层数据
		getFloor() {
			this.$request({
				url: '/api/public/v1/home/floordata',
				method: 'get'
			}).then(res => {
				console.log('res:', res);
				this.floors = res;
			});
		},
		// 导航数据
		getNav() {
			this.$request({
				url: '/api/public/v1/home/catitems',
				method: 'get'
			}).then(res => {
				// console.log('res:',res)
				this.navs = res;
			});
		},
		getSwipers() {
			// 使用抽取的$request对象来调用接口
			this.$request({
				url: '/api/public/v1/home/swiperdata',
				method: 'get'
			}).then(res => {
				// console.log('res:',res)
				this.swipers = res;
			});
		}
	}
};
</script>

<style lang="less">
.home-container {
	.swiper-image {
		width: 100%;
	}
	// 导航区域
	.nav-box {
		height: 194rpx;
		display: flex;
		justify-content: space-around;
		image {
			width: 128rpx;
			height: 140rpx;
		}
	}
	// 楼层区域
	.floor-box {
		.header {
			background-color: #f4f4f4;
			padding: 20rpx;
			image {
				width: 1280rpx;
				height: 100rpx;
			}
		}
		.bottom {
			display: flex;
			padding-left: 20rpx;
			> image {
				width: 232rpx;
				height: 386rpx;
				margin-right: 10rpx;
			}
			.right {
				flex: 1;
				image {
					width: 232rpx;
					height: 188rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	// 返回顶部
	.to-top {
		position: fixed;
		right: 20rpx;
		bottom: 40rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.3);
		text-align: center;
		border-radius: 50%;
		text {
			// transform: rotate(-90deg);
			display: block;
		}
	}
}
</style>
